<template>
  <el-card class="box-card">
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div style="height: 76vh;">
      <div v-show="!institutionDetailShow" style="height: 96%">
        <el-form :inline="true" :model="searchInline" class="demo-form-inline" style="padding-top: 12px;height:5%;">
          <el-form-item>
            <el-input v-model="searchInline.provices" placeholder="省份"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchInline.cities" placeholder="城市"></el-input>
          </el-form-item>
          <el-form-item style="float:right;padding-right: 10px">
            <el-button type="text" @click=" queryServerUnit()"><span style="color:rgb(104,104,104)">筛选</span>
            </el-button>
          </el-form-item>
        </el-form>
        <div  style="margin-top:18px;height: 90%;overflow-y: auto"><!--不加overflow-y不会出现滚动条-->
            <el-table v-loading="" :data="makeUnitListTableData" max-height="800" size="mini"
                      :cell-style="cellStyle" :header-cell-style="{background: '#DAE3F3', fontSize:'18px',width: '100%',color:'#4472C4'}" >
              <el-table-column prop="id" label="序号">
              </el-table-column>
              <el-table-column prop="institutionName" label="制造/施工单位">
                <template slot-scope="scope">
                  <el-button class="cell" type="text" style="text-decoration: none; color: #606266"
                             @click="gotoDetail(scope.row.institutionName,scope.row.devCount)">
                    {{ scope.row.institutionName }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="approvalNum" label="许可证">
              </el-table-column>
              <el-table-column prop="unitAddr" label="单位地址">
              </el-table-column>
              <el-table-column prop="tel" label="联系电话">
              </el-table-column>
              <el-table-column prop="devCount" label="设备数量">
              </el-table-column>
            </el-table>
        </div>
        <div class="page" style="height: 5%">
          <div style="float: right;height: 100%">
            <el-pagination style="height: 100%"
              background
              @size-change="checkUnitListTablePageSizeChange"
              @current-change="checkUnitListTablePageChange"
              :current-page="CheckUnitListCurrentPage"
              :page-sizes="[10, 15, 20, 40]"
              :page-size="CheckUnitListArgs.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="CheckUnitListTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div v-if="institutionDetailShow" style="height: 96%">
        <UnitDetail :sydwName="sydwName" :sydeCount="sydeCount"></UnitDetail>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../BreadCrumb/BreadCrumb.vue";
import {
  CheckUnitListSearchArgs, CheckUnitDetailSearchArgs, CheckUnitSydwListSearchArgs,
  searchCheckUnitList, searchCheckUnitDetailData, searchCheckUnitSydwList,
} from "../../../../api/chuguan/data-service";
import InstitutionDetail from "./checkUnit/InstitutionDetail.vue";
import UnitDetail from "./make/UnitDetail";
const axios = require('axios');
export default {
  data() {
    return {
      // 导航树相关数据
      naviItems: [{text: "储罐"}, {text: "云服制造", to: "/chuguan/dataCloudService/Make"},],
      institutionDetailShow: false,  //控制点击机构名称后显示机构相关细节的展示
      sydwName: "",
      sydeCount:0,
      searchInline: {
        provices: "",
        cities: "",
      },
      // 检验单位列表表格相关数据
      CheckUnitListLoading: true,
      makeUnitListTableData: [
       /* {id:1,institutionName:"/","approvalNum":"GBJ 128-1990《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:2},
        {id:1,institutionName:"HUD GENERAL ENGINEERING SERVICES LTD.","approvalNum":"B.S. 2654",unitAddr:"",tel:"",devCount:1},
        {id:2,institutionName:"YUN KEE ENG. CO","approvalNum":"BS 2654-1989",unitAddr:"",tel:"",devCount:1},
        {id:4,institutionName:"不  详","approvalNum":"不  详",unitAddr:"",tel:"",devCount:2},
        {id:5,institutionName:"不详","approvalNum":"不详",unitAddr:"",tel:"",devCount:11},
        {id:3,institutionName:"中化十四建设公司南通分公司","approvalNum":"GBJ128-90 《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:4,institutionName:"中国化学工程第十四建设公司","approvalNum":"GBJ128-90《立式圆筒型钢制焊接油罐施工及验收规范》/GB50236-98《现场设备、工业管道焊接工程施工及验收规范》",unitAddr:"",tel:"",devCount:2},
        {id:5,institutionName:"中国有色金属工业十六治第三工程公司","approvalNum":"GB/J 128-1990《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:6,institutionName:"中国石化集团第二建设公司","approvalNum":"GBJ 128-90《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:7,institutionName:"中国石化集团第十建设公司","approvalNum":"GB50128-2005《立式圆筒形焊接储罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:8,institutionName:"中国石油天然气第一建设公司","approvalNum":"GB50128-2005《立式圆筒钢制储罐验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:9,institutionName:"中国福建一冶","approvalNum":"GBJ128-1990《立式圆筒形钢制焊接油罐设计技术规定》",unitAddr:"",tel:"",devCount:2},
        {id:10,institutionName:"中石化天津四公司","approvalNum":"GBJ128-90《立式圆筒形钢制焊接油罐设计技术规定》SH3530-93《石油化工立式圆筒形钢制焊接油罐设计技术规定》",unitAddr:"",tel:"",devCount:2},
        {id:11,institutionName:"中石化宁波工程有限公司","approvalNum":"GBJ 128-90《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:3},
        {id:12,institutionName:"中石化第十建设有限公司","approvalNum":"GBJ128-90《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:13,institutionName:"中石化第四建设有限公司","approvalNum":"不详",unitAddr:"",tel:"",devCount:1},
        {id:14,institutionName:"中石油七公司","approvalNum":"制-11《1000m³~10000m³浮顶油罐技术条件》",unitAddr:"",tel:"",devCount:2},
        {id:15,institutionName:"北京市设备安装公司金属结构公司","approvalNum":"不  详",unitAddr:"",tel:"",devCount:1},
        {id:16,institutionName:"华北石油油建一公司","approvalNum":"GBJ 128-90《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:3},
        {id:17,institutionName:"华北石油管理局油建二公司","approvalNum":"GBJ128-90《立式圆筒型钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:2},
        {id:18,institutionName:"华油工建","approvalNum":"GBJ128-90《立式圆筒型钢制焊接油罐施工及验收规范》/GBJ236-82《现场设备、工业管道焊接工程施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:19,institutionName:"华西机电公司二处","approvalNum":"不  详",unitAddr:"",tel:"",devCount:1},
        {id:20,institutionName:"天津冠杰石化工程有限公司","approvalNum":"GB50128-2005《立式圆筒形钢制焊接储罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:21,institutionName:"天津津滨石化设备有限公司","approvalNum":"GB50128+W25:W30-2005《立式圆筒形钢制焊接储罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:22,institutionName:"太原铁路工程总公司机械修造厂","approvalNum":"GBJ128-90《立式圆筒形钢制焊接油罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:23,institutionName:"市建一公司","approvalNum":"不详",unitAddr:"",tel:"",devCount:1},
        {id:24,institutionName:"市建二公司","approvalNum":"不详",unitAddr:"",tel:"",devCount:1},
        {id:25,institutionName:"江苏华东设备安装公司","approvalNum":"《立式圆筒形钢制焊接油罐施工及验收规范》GBJ128-90、《石油化工立式圆筒形钢制焊接储罐施工工艺标准》SH3530-93",unitAddr:"",tel:"",devCount:1},
        {id:26,institutionName:"河北华北石油工程建设有限公司","approvalNum":"GB50128-2005《立式圆筒形焊接储罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},
        {id:27,institutionName:"深圳海湾石油化工工程公司","approvalNum":"不  详",unitAddr:"",tel:"",devCount:1},
        {id:28,institutionName:"湖南省工业设备安装公司","approvalNum":"《立式圆筒形钢制焊接油罐施工及验收规范》GBJ128-90",unitAddr:"",tel:"",devCount:1},
        {id:29,institutionName:"石油二厂工程公司","approvalNum":"不详",unitAddr:"",tel:"",devCount:1},
        {id:30,institutionName:"管道二公司","approvalNum":"/",unitAddr:"",tel:"",devCount:1},
        {id:31,institutionName:"胜利油建","approvalNum":"GB50128-2005《立式圆筒形钢制焊接储罐施工及验收规范》",unitAddr:"",tel:"",devCount:1},*/
      ],
      _makeUnitListTableData:[],
      tag:0,
      CheckUnitListTotal: 10,
      CheckUnitListCurrentPage: 1,
      CheckUnitListArgs: new CheckUnitListSearchArgs(),

    };
  },
  async created() {
    this.getData()
  },
  components: {
    Breadcrumb,
    UnitDetail,
  },
  methods: {
    queryServerUnit: function () {

    },
    getData:async function() {
      this.CheckUnitListArgs.pageSize = 146
      const _temp = await searchCheckUnitList(this.CheckUnitListArgs)
      const temp_=_temp.data.data  //所有储罐列表
      var sjdwAll=[]
      for(let i in temp_){
        let prevalue=temp_[i].f021
        temp_[i].f021 = temp_[i].f021.replace(/\s+/g, "")
        sjdwAll.push(temp_[i].f021)
      }
      const temp=[]               //不带重复名称的检查机构名
      for(let i in sjdwAll){
        if(temp.indexOf(sjdwAll[i])==-1&&sjdwAll[i].length>3){ //功能：去除重复名
          temp.push(sjdwAll[i])
        }
      }
      let objs=[]
      for(let j in temp){
        let count=0
        var id=0
        var approvalNum=''
        for(let z=0;z<temp_.length;z++){
          if(temp[j]==temp_[z].f021){
            count++
            id=temp_[z].id
            approvalNum=temp_[z].f022
          }
        }
        let obj={
          id:id,
          institutionName:temp[j],
          approvalNum:approvalNum,
          unitAddr:"",
          tel:"",
          devCount:count
        }
        objs.push(obj)
        this.makeUnitListTableData=objs
      }
      this.CheckUnitListTotal=this.makeUnitListTableData.length
      this.checkUnitListTablePageSizeChange(10)
    },
    // 获取检验单位列表数据
    async searchCheckUnitList() {
      this.CheckUnitListLoading = true;
      const res = await searchCheckUnitList(this.CheckUnitListArgs);
      this.CheckUnitListLoading = false;
      const {list, total} = res.data;
      this.CheckUnitListTableData = list;
      this.CheckUnitListTotal = +total;
    },
    // 检验单位列表表格页面大小改变
   checkUnitListTablePageSizeChange(pageSize) {
      this.CheckUnitListArgs.num = pageSize;
      if (this.tag==0){
        this._makeUnitListTableData=this.makeUnitListTableData;
        this.tag=1
      }
      let thirdTable=[]
      if(pageSize<=this._makeUnitListTableData.length){
          for (let i=0;i<pageSize;i++){
               thirdTable.push(this._makeUnitListTableData[i])
          }
        this.makeUnitListTableData=thirdTable
       }else {
          this.makeUnitListTableData=this._makeUnitListTableData
        }
      this.$forceUpdate()

    },
    // 检验单位列表表格页码改变
    checkUnitListTablePageChange(page) {
      this.CheckUnitListCurrentPage = page
      console.log(this.CheckUnitListArgs.num*(page-1),page*this.CheckUnitListArgs.num-1)
      let thirdTable=[]
      if(page*this.CheckUnitListArgs.num-1<this._makeUnitListTableData.length){
        for(let table_start=this.CheckUnitListArgs.num*(page-1);table_start<=page*this.CheckUnitListArgs.num-1;table_start++){
          thirdTable.push(this._makeUnitListTableData[table_start])
        }
        this.makeUnitListTableData=thirdTable
      }else {
        for(let table_start=this.CheckUnitListArgs.num*(page-1);table_start<this._makeUnitListTableData.length;table_start++){
          thirdTable.push(this._makeUnitListTableData[table_start])
        }
        this.makeUnitListTableData=thirdTable
      }
      this.$forceUpdate()
    },
    // 跳转到某个检验单位的详情页面
    gotoDetail(institutionName,sydeCount) {
      this.institutionDetailShow = true;
      this.sydwName = institutionName;
      this.sydeCount=sydeCount
      console.log(institutionName)
    },
    //表格背景设置
    cellStyle:function ({row,column,rowIndex,columnIndex}){
      if(columnIndex ==5){//表格中的奇数行
        if(rowIndex % 2==1) {//表格中的奇数行
          return 'color:red;fontSize:16px;backgroundColor:#DAE3F3;'
        }else {
          return 'color:red;fontSize:16px;'
        }
      }
      if(rowIndex % 2==1){//表格中的奇数行
          return 'backgroundColor:#DAE3F3;backgroundColor:#DAE3F3;'
      }
    }

  }
};
</script>

<style lang="less" scoped>

</style>
